<template>
  <div class="aaa" :style="{ 'min-height':'600px',height: '100%', width: '100%', margin: '0 0 10px 8px', 'background-size': '100% 100%', 'background-color': 'rgb(238,238,238)' }">
    <el-row style="min-height:10%;background-color:white;border-radius:10px;padding-top:1%;margin-right: 10px;" type="flex" align="middle">
      <el-col :offset="0">
        <el-form :model="queryParam" ref="form" label-width="80px" :inline="true" size="mini">
          <el-form-item label="立项日期" size="mini">
            <el-date-picker style="width:370px" v-model="daterangeForFinishDate" type="daterange" range-separator="至" :picker-options="pickerOptions" start-placeholder="如：2021-01-01" end-placeholder="如：2021-01-01" value-format="yyyy-MM-dd" @change="daterangeForFinishDateChange"> </el-date-picker>
          </el-form-item>
          <el-form-item label="结项日期" size="mini">
            <el-date-picker style="width:370px" v-model="daterangeForActualEndDate" type="daterange" range-separator="至" :picker-options="pickerOptions" start-placeholder="如：2021-01-01" end-placeholder="如：2021-01-01" value-format="yyyy-MM-dd" @change="daterangeForActualEndDateChange"> </el-date-picker>
          </el-form-item>
          <el-button type="primary" size="mini" @click="doQuery">查询</el-button>
        </el-form>
      </el-col>
    </el-row>
    <el-row style="margin-top:10px">
      <el-col :span="6" :xl="5" style="height:100%">
        <component style="height:18vh" :is="componentFirst" :recordId="componentFirst.recordId" ref="first" v-if="componentFirst"></component>
        <component style="min-height:388px;height:calc(53vh - 10px)" :is="componentSecond" :recordId="componentSecond.recordId" ref="second" v-if="componentSecond"></component>
      </el-col>
      <el-col :span="12" :xl="14" style="padding-left:10px">
        <component :is="componentThird" style="border-radius:10px;background-color:white" :recordId="componentThird.recordId" ref="third" v-if="componentThird"></component>
      </el-col>
      <el-col :span="6" :xl="5" style="height:100%;">
        <component style="height:24vh" :is="componentFourth" :recordId="componentFourth.recordId" ref="fourth" v-if="componentFourth"></component>
        <component style="min-height:343px;height:calc(47vh - 10px)" :is="componentFifth" :recordId="componentFifth.recordId" ref="fifth" v-if="componentFifth"></component>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import store from '@tapui/store'
import { getAction } from '@tapui/utils/http'
import echarts from 'echarts'
// import dataCenter from '../../mpmDataDashboardComponents/dataCenter'
// import dataCenter from '../../mpmDataDashboardComponents/dataCenter.vue'
// import { formateTec } from '../../../utils/calculation'

export default {
  components: {},
  name: 'dashboard',
  data() {
    return {
      nowDate: '',
      userInfo: {},
      deptInfo: {},
      timeFlag: 'thisYear',
      dataList: [],
      queryData: {},
      queryParam: {},
      componentFirst: null,
      componentSecond: null,
      componentThird: null,
      componentFourth: null,
      componentFifth: null,
      daterangeForActualEndDate: [],
      daterangeForFinishDate: [],
      clientHeight: Number,
      deptOptions: [],
      deptLoading: false,
      deptCodeArr: [],
      codeModel: {},
      pickerOptions: {
        shortcuts: [
          {
            text: '本月',
            onClick(picker) {
              picker.$emit('pick', [new Date(), new Date()])
            }
          },
          {
            text: '今年至今',
            onClick(picker) {
              const end = new Date()
              const start = new Date(new Date().getFullYear(), 0)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近六个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 6)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一年',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setMonth(start.getMonth() - 12)
              picker.$emit('pick', [start, end])
            }
          }
        ]
      },
      url: {
        queryCodeList: '/sd/project/dataCodeList',
        getComponentsList: '/sd/sdIndex/getComponentsList'
      }
    }
  },
  methods: {
    // 立项日期选择器确定事件
    daterangeForFinishDateChange(dateSelected) {
      if (dateSelected) {
        // 控制日期差不得超过一年
        var beginDateStamp = new Date(dateSelected[0]).getTime()
        var endDateStamp = new Date(dateSelected[1]).getTime()
        if (endDateStamp - beginDateStamp > 1000 * 60 * 60 * 24 * 366) {
          this.$tap.alert('立项时间差不能超过一年', 'warning')
          this.queryParam.startDateForFinisthDate = {}
          this.queryParam.endDaterFinisthDate = {}
          this.daterangeForFinishDate = []
          return
        }
        this.queryParam.startDateForFinisthDate = dateSelected[0]
        this.queryParam.endDaterFinisthDate = dateSelected[1]
      } else {
        this.queryParam.startDateForFinisthDate = null
        this.queryParam.endDaterFinisthDate = null
      }
    },
    // 获取datacodelist
    doQueryCode() {
      if (this.url.queryCodeList) {
        getAction(this.url.queryCodeList, {}).then((res) => {
          if (res.success) {
            this.codeModel = res.result
          } else {
            this.$tap.alert(res.message, 'warning')
          }
        })
      }
    },
    // 结项日期选择器确定事件
    daterangeForActualEndDateChange(dateSelected) {
      // 控制日期差不得超过一年
      if (dateSelected) {
        var beginDateStamp = new Date(dateSelected[0]).getTime()
        var endDateStamp = new Date(dateSelected[1]).getTime()
        if (endDateStamp - beginDateStamp > 1000 * 60 * 60 * 24 * 366) {
          this.$tap.alert('结项时间差不能超过一年', 'warning')
          this.queryParam.startDateForActualEndDate = {}
          this.queryParam.endDateForActualEndDate = {}
          this.daterangeForActualEndDate = []
          return
        }
        this.queryParam.startDateForActualEndDate = dateSelected[0]
        this.queryParam.endDateForActualEndDate = dateSelected[1]
      } else {
        this.queryParam.startDateForActualEndDate = null
        this.queryParam.endDateForActualEndDate = null
      }
    },
    // 点击查询按钮刷新数据
    doQuery() {
      if (this.deptCodeArr.length > 0) {
        this.queryParam.deptCodeArr = this.deptCodeArr.join(',')
      } else {
        this.queryParam.deptCodeArr = null
      }
      this.$refs.first.queryData(this.queryParam)
      this.$refs.second.getTop10Info(this.queryParam)
      this.$refs.third.doQueryForAll(this.queryParam)
      this.$refs.fourth.setLineOptionForStatus(this.queryParam)
      this.$refs.fifth.getTop10Info(this.queryParam)
      this.$refs.third.queryParam = this.queryParam
    },
    // 项目状态饼图
    setProjectStatusPie() {
      // let mychart = echarts.init(this.$el, 'macarons')

      let mychart = echarts.init(document.getElementById('projectStatPie'))
      var seriesForThis = this.queryData.pieData
      let option = {
        // color: ['#0066FF', '#00FF66', '#66CCFF'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)'
        },

        legend: [
          {
            orient: 'vertical',
            textStyle: { color: '#8fafc0', fontSize: '13' },
            top: '70%',
            itemGap: 5,
            height: 60,
            formatter: function formatter(name) {
              var index = 0
              var dataTemp = seriesForThis
              dataTemp.forEach(function formatter(value, i) {
                if (value.name === name) {
                  index = i
                }
              })
              return name + dataTemp[index].value + '个'
            },
            data: seriesForThis
          }
        ],
        series: [
          {
            name: '项目状态',
            type: 'pie',
            // 大小
            radius: ['60%', '48%'],
            // 位置
            center: ['50%', '40%'],
            avoidLabelOverlap: false,
            top: 0,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '30',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.queryData.pieData
          }
        ]
      }
      mychart.setOption(option)
    },
    formateTec(value) {
      if (!value) return '0.00'
      /* 原来用的是Number(value).toFixed(0)，这样取整时有问题，例如0.51取整之后为1，感谢Nils指正*/
      /* 后来改成了 Number(value)|0,但是输入超过十一位就为负数了，具体见评论 */
      var intPart = Number(value) - (Number(value) % 1) // 获取整数部分（这里是windy93的方法）
      var intPartFormat = intPart.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,') // 将整数部分逢三一断

      var floatPart = '.00' // 预定义小数部分
      var value2Array = value.toString().split('.')

      // =2表示数据有小数位
      if (value2Array.length === 2) {
        floatPart = value2Array[1].toString() // 拿到小数部分

        if (floatPart.length === 1) {
          // 补0,实际上用不着
          return intPartFormat + '.' + floatPart + '0'
        } else {
          return intPartFormat + '.' + floatPart
        }
      } else {
        return intPartFormat + floatPart
      }
    },
    //   实时展示当前时间
    getDate() {
      let yy = new Date().getFullYear()
      let mm = new Date().getMonth() + 1
      let dd = new Date().getDate()
      let week = new Date().getDay()
      let hh = new Date().getHours()
      let nowWeek = ''
      let mf = new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes()
      let ss = new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds()

      if (week === 1) {
        nowWeek = '星期一'
      } else if (week === 2) {
        nowWeek = '星期二'
      } else if (week === 3) {
        nowWeek = '星期三'
      } else if (week === 4) {
        nowWeek = '星期四'
      } else if (week === 5) {
        nowWeek = '星期五'
      } else if (week === 6) {
        nowWeek = '星期六'
      } else {
        nowWeek = '星期日'
      }
      this.nowDate = yy + '年       ' + mm + '月       ' + dd + '日        ' + nowWeek + '    ' + hh + ':  ' + mf + ':  ' + ss
    }
  },
  created() {
    this.getDate()
    this.doQueryCode()
  },
  mounted() {
    // 动态加载组件
    getAction(this.url.getComponentsList).then((res) => {
      res.result.forEach((element) => {
        // 对应位置的组件赋值
        if (element.position === '1') {
          this.componentFirst = require(`@/views/gpm/gpmDataDashboardComponents/${element.vuecomponentcode}`).default
          this.componentFirst.recordId = element.id
        } else if (element.position === '2') {
          this.componentSecond = require(`@/views/gpm/gpmDataDashboardComponents/${element.vuecomponentcode}`).default
          this.componentSecond.recordId = element.id
        } else if (element.position === '3') {
          this.componentThird = require(`@/views/gpm/gpmDataDashboardComponents/${element.vuecomponentcode}`).default
          this.componentThird.recordId = element.id
        } else if (element.position === '4') {
          this.componentFourth = require(`@/views/gpm/gpmDataDashboardComponents/${element.vuecomponentcode}`).default
          this.componentFourth.recordId = element.id
        } else if (element.position === '5') {
          this.componentFifth = require(`@/views/gpm/gpmDataDashboardComponents/${element.vuecomponentcode}`).default
          this.componentFifth.recordId = element.id
        }
      })
    })
  },
  beforeDestroy() {},
  beforeMount() {
    this.clientHeight = document.body.clientHeight
  }
}
</script>

<style lang="scss" scoped>
.dataTitleForTop10 {
  margin-top: 2vh;
  // color: #8fafc0;
  height: 18px;
}
.dataChunkBigTile {
  bottom: 5px;
  color: black;
  font-size: 2.5vh;
}
.top10Label {
  font-size: 1.5vh;
  margin-bottom: 15px;
  text-align: center;
}
.dataChunkTile {
  // font-size: 16px;
  font-size: 2vh;
  margin-bottom: 15px;
}
.dataChunkValue {
  font-size: 2vh;
  color: black;
}
.dataRow {
  margin-top: 2vh;
  // color: #8fafc0;
}
.app-main {
  height: 100%;
  width: 100%;
  /* background-image: url('/static/images/paojectManager/dataBigSereen.jpg'); */
}
.topCol {
  height: 100%;
  color: #8fafc0;
  text-align: center;
  padding-top: 1.5%;
}
.topRow {
  height: 10%;
}
.dataCenter {
  height: 100%;
  // background-image: url('/static/images/paojectManager/dataCenter.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 20px;
}
.projectState {
  height: 100%;
  // background-image: url('/static/images/paojectManager/projectState.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
.top10 {
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 10px;
}
.oneYearData {
  height: 100%;
  // background-image: url('/static/images/paojectManager/oneYearData.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding: 20px;
}
.el-scrollbar__view {
  height: 98%;
  width: 100%;
  /* background-image: url('/static/images/paojectManager/dataBigSereen.jpg'); */
}
#echartsContainer {
  width: 100%;
  height: 100%;
  margin-bottom: 8px;
  /* border: 1px solid #ddd; */
}
.row {
  margin-top: 10px;
}
.dataRowForTop10 {
  margin-top: 1.5vh;
}
.top10Content {
  font-size: 1.5vh;
  color: #8fafc0;
  text-align: left;
}
.top10Title {
  font-size: 2.5vh;
  color: black;
}
.timeFlagGroup {
  margin-top: 2vh;
}
.buttonBgColor {
  background-color: #042e50;
}
.el-date-editor {
  border: 1px solid #a0a0a0 !important;
}
@media screen and (max-width: 1920px) {
  .dataRow {
    margin-top: 5px;
    // color: #8fafc0;
  }
  .dataRowForTop10 {
    margin-top: 8px;
    // color: #8fafc0;
  }
}
</style>
